<template>
	<view>
		<image class="bf-imh" :src="bgimg" mode="widthFix"></image>
		<view class="" :style="{height:navHeight+'px'}">
			<image @click="back" :style="{margin: (navHeight-46+12) + 'px 0 0 24rpx'}" class="back-icon"
				src="/static/image/icon/arrow-left.png" mode="widthFix"></image>
		</view>
		<view class="gold-use">
			<button v-if="canUserProfile" class="release-two" @click="getUserProfile">微信用户一键登录</button>
			<button v-else class="release-two" open-type="getUserInfo" scope="userInfo" @getAuthorize="getUserInfo"
				@getuserinfo="getUserInfo" lang="zh_CN">微信用户一键登录
			</button>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				bgimg: '',
				navHeight: 80,
				canUserProfile: getApp().globalData.canIUseGetUserProfile
			}
		},
		computed: {
			...mapState({
				showLoginModal: state => state.user.showLoginModal,
			}),
			isGuest() {
				return this.$store.state.user.accessToken === '' || this.$store.state.user.accessToken === null;
			},
		},
		watch:{
			isGuest(n,v) {
				if(this.$store.state.user.accessToken === '' || this.$store.state.user.accessToken === null){
				}else{
					uni.navigateBack()
				}
			},
		},
		created() {
			const vm = this;
			Vue.use({
				install(Vue, options) {
					Vue.prototype.$layout = {
						getUserInfo() {
							vm.showLoginModal = true;
							return new Promise((resolve, reject) => {
								vm.getUserInfo = (e) => {};
							});
						},
					};
				},
			});
		},
		onReady() {
			wx.getSystemInfo({
				success: res => {
					//导航高度
					//console.log( res.statusBarHeight + 46)
					this.navHeight = res.statusBarHeight + 46;
				},
				fail(err) {
					console.log(err);
				}
			})
			this.onReq(278)
		},
		methods: {
			onReq(kid) {
				this.$request({
					url: this.$api.navs.catedetail,
					data: {
						keyword: kid
					}
				}).then((res) => {
					if (kid == 278) {
						this.bgimg = res.data.list[0].icon_url
					}
				}).catch(() => {

				})
			},
			back() {
				// console.log(666);
				uni.navigateBack()
			},
			cancel() {
				this.$store.commit('user/showLoginModal', false);
				this.$user.getUserInfoReject('getUserInfo fail: cancel.');
				/* let pages = getCurrentPages();
				let list = ['/pages/index/index', '/pages/user-center/user-center'];
				let url = this.$platDiff.route();
				if (list.includes(url)) {
					url = this.$platDiff.routeWithOption();
					uni.redirectTo({
						url: url
					});
				} else if (pages.length >= 2) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					uni.redirectTo({
						url: '/pages/index/index'
					});
				} */
			},
			getUserInfoClick(e) {},
			getUserProfile(e) {
				// console.log(e,11111111);
				this.$store.commit('user/showLoginModal', false);
				const resolve = this.$user.getUserInfoResolve;
				// console.log(resolve,8444444);
				const reject = this.$user.getUserInfoReject;
				this.$event.on(this.$const.EVENT_USER_LOGIN, true).then(() => {
					this.$emit('click');
					uni.reLaunch({
						url: '/pages/index/index'
					})
					// this.$jump({
					// 	open_type: 'reload'
					// })
				});
				// 9.24 修改文字
				// #ifdef MP-WEIXIN
				uni.getUserProfile({
					desc: '获取你的头像、昵称、地区和性别,方便发放金币',
					lang: 'zh_CN',
					success: res => {
						return resolve(res);
					},
					fail: res => {
						return reject(res.errMsg);
					}
				})
				// #endif
			},
			getUserInfo(e) {
				// console.log(e,11111111);
				this.$store.commit('user/showLoginModal', false);
				const resolve = this.$user.getUserInfoResolve;
				// console.log(resolve);
				const reject = this.$user.getUserInfoReject;
				// console.log(reject);
				// 20220210 注释
				this.$event.on(this.$const.EVENT_USER_LOGIN, true).then(() => {
					this.$emit('click');
					uni.reLaunch({
						url: '/pages/index/index'
					})
					// this.$jump({
					// 	open_type: 'reload'
					// })
				});

				// #ifdef MP-WEIXIN
				if (e.detail.errMsg !== 'getUserInfo:ok') {
					return reject(e.detail.errMsg);
				} else {
					return resolve(e);
				}
				// #endif
			},
		}
	}
</script>

<style scoped lang="scss">
	.back-icon {
		position: absolute;
		width: 24rpx;
		z-index: 666;
		margin: 46px 0 0 36rpx;
		line-height: 46rpx;
	}

	.bf-imh {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
	}

	.gold-use {
		position: absolute;
		bottom: 368rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 636rpx;
		margin: 0 auto;
		text-align: center;

		&.unchecked {
			background-color: #8f8f8f;
			color: #FFFFFF;
		}
	}

	.release-two {
		color: #fff;
		background: #09ba07;
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 12rpx;
	}
</style>
